.trix-container {
  @extend .rich-text-area-container
}

trix-toolbar {
  @extend .p-1;
  @extend .border-bottom;
  background-color: $gray-25 !important;
  width: 100%;

  .trix-button.trix-active {
    background-color: $gray-100!important;
  }

  .trix-button-group {
    @extend .gap-1;
    margin-left: 0 !important;
  }

  .trix-button {
    @extend .rounded-sm;

    width: 36px !important;
    height: 30px !important;
    padding: 6px !important;
  }

  .trix-dialogs > .trix-dialog > .trix-dialog__link-fields > .trix-button-group > .trix-button--dialog {
    width: 100% !important;
    height: 100% !important;
    padding: 0.5rem 0.75rem !important;
  }

  .trix-dialog--x-video-embed {
    max-width: 600px;
  }
}

trix-editor {
  @extend .m-2;
  border-radius: $input-border-radius;
  border: 0 none !important;
}

.trix-container, trix-editor {
  background-color: $input-bg;
}

.trix-container:has(trix-editor[contenteditable='false']) {
  background-color: $gray-50;

  &:active {
    background-color: $gray-50 !important;
  }

  trix-editor {
    background-color: $gray-50;
  }
}

trix-toolbar .trix-button--icon::before {
  margin: 4px;
}

trix-toolbar .trix-button, trix-toolbar .trix-button-group {
  border: 0 none !important;
  margin-bottom: 0 !important;
}

trix-toolbar .trix-button {
  width: 32px !important;
  height: 28px !important;
  padding: 4px;
}
trix-toolbar .trix-button:hover {
  background-color: $border-color !important;
  color: theme-color('black') !important;
}

trix-toolbar .trix-button-row {
  flex-wrap: wrap !important;
  display: flex;
  width: 100%;
}

trix-toolbar .trix-dialog {
  background-color: $white !important;
  border-top: 0 none !important;
  border-radius: $border-radius !important;
  top: 4px !important;
}

trix-toolbar .trix-dialog .trix-input {
  @extend .form-control;
}

trix-toolbar .trix-dialog .trix-button {
  @extend .btn;
  @extend .btn-light;
  @extend .px-4;
  @extend .py-2;
  @extend .my-0;
  @extend .mr-1;
  border: 1px solid $gray-200 !important;
}

trix-toolbar .trix-dialog__link-fields {
  align-items: center;
}

// icons
.trix-button--icon-embed::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16"><path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/></svg>');
  top: 8% !important;
}
